<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8" />
    <title>主页 - </title>
    <style>
        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }

        .custom-btn {
            width: 147px;
            height: 88px;
            /*box-shadow: 1px 1px 1px #888888;*/
            text-align: center;
            display: inline-block;
            margin-top: 3px;
            margin-right: 3px;
        }

        .custom-btn-num-text {
            color: white;
            font-size: 20px;
            font-family: fantasy;
            margin-top: 39px;
        }

        .my-btn {
            width: 147px;
            height: 88px;
            background-color: green;
            position: relative;
            display: inline-block;
        }

        .head-btn {
            position: absolute;
            font-size: 16px;
            top: 10px;
            left: 42px;
            color: white;
        }

        .foot-btn {
            bottom: 0px;
            width: 100%;
            height: 19px;
            background: rgba(45, 32, 32, 0.2);
            position: absolute;

        }

        .detail-btn {
            font-size: 12px;
            position: absolute;
            top: 2px;
            left: 6px;
            color: white;
        }

        .detail-click {
            position: absolute;
            right: 6px;
            top: 1px;
            color: white;
        }

        .body-btn {
            position: absolute;
            color: white;
            font-size: 20px;
            font-family: fantasy;
            text-align: center;
            top: 38px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

        }
    </style>


</head>
<body>

    <!-- ajax layout which only needs content area -->
    <div class="page-header">
        <h1>
            <shiro:hasPermission name="BIGSCCREEN">
                <a href="/page/bigScreen">切换大屏</a>
            </shiro:hasPermission>
            <shiro:lacksPermission name="BIGSCCREEN">
                主页
            </shiro:lacksPermission>
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                美好的体验从这里开始
            </small>
        </h1>
    </div>
    <!-- /.page-header -->

</body>
</html>